<template>
    <div>
        <div id="map1" style="width:100%; height:50vh">
        地图
        </div>
        <input type="range" v-model.number="zoom" @change="zoomChange()"/>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                map:null,  //地图
                point:null, // 点
                zoom:16, // 缩放
            }
        },
        mounted(){
            // 创建地图的实例
            this.map = new window.BMapGL.Map("map1");
            // 创建点
            this.point = new window.BMapGL.Point(116.404, 39.915);
            // 缩放设置中心
            this.map.centerAndZoom(this.point,this.zoom);
            // 鼠标可以缩放
            this.map.enableScrollWheelZoom();
            // 添加点击事件
            this.map.addEventListener("click",this.createMark)
        },
        methods:{
            zoomChange(){
                // 当数据变化时候重新缩放设置中心
                this.map.centerAndZoom(this.point,this.zoom);
            },
            createMark(e){
                // 创建一个点
                var p = new window.BMapGL.Point(e.latlng.lng,e.latlng.lat);
                // 创建一个标记
                var m = new window.BMapGL.Marker(p);
                // 显示标记
                this.map.addOverlay(m);
            }
        }
    }
</script>